<!-- 供应商管理-注册供应商列表  -->
<template>
  <div>
    <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
    </pageHeader>
    <div style="padding: 10px 20px" class="client-detail-header">
      <h1> {{ HeaderData.list.name }} </h1>
      <div
        :style="{
          display: 'flex',
          lineHeight: '32px',
        }"
      >
        <div>启用：</div>
        <div
          :style="{
            color: '#165DFF',
            marginRight: '20px',
          }"
        >
          <a-switch
            disabled
            v-model="HeaderData.list.enabled"
            :checked-value="1"
            :unchecked-value="2"
          />
        </div>
      </div>
      <div
        :style="{
          display: 'flex',
          marginTop: '20px',
        }"
      >
        <div>更新时间：</div>
        <div>
          {{ dayjs(HeaderData.list.updatedAt).format('YYYY-MM-DD HH:mm:ss') }}
        </div>
      </div>
      <div>
        <div
          :style="{
            marginTop: '20px',
            marginBottom: '20px',
          }"
        >
          跟进状态：
          <div
            :style="{
              marginTop: '10px',
              marginBottom: '10px',
            }"
          >
            <a-steps small type="arrow" :current="3">
              <a-step>初选供应商</a-step>
              <a-step>注册供应商</a-step>
              <a-step>合格供应商</a-step>
            </a-steps>
          </div>
        </div>
      </div>
      <!-- <div
        :style="{
          marginTop: '20px',
        }"
      >
        <div>
          客户联系人：
          <span
            :style="{
              cursor: 'pointer',
              color: '#165DFF',
            }"
            >查看全部></span
          >
        </div>
        <div
          :style="{
            marginTop: '20px',
          }"
        >
          <a-avatar :size="70" shape="square">Arco</a-avatar>
        </div>
      </div> -->
    </div>
    <div class="client-detail-tabs">
      <a-tabs v-model:active-key="tabsActive" default-active-key="1" lazy-load>
        <a-tab-pane v-for="item in tabs" :key="item.key" :title="item.title">
          <BaseInfo v-if="item.key === '1'"></BaseInfo>
          <SupplierAccoount v-else-if="item.key === '3'"></SupplierAccoount>
          <ContractRecords v-else-if="item.key === '8'"></ContractRecords>
          <PaymentInvoiceRecords
            v-else-if="item.key === '9'"
          ></PaymentInvoiceRecords>
          <SupplierAppendix v-else-if="item.key === '11'"></SupplierAppendix>
          <SupplierAttestation
            v-else-if="item.key === '6'"
          ></SupplierAttestation>
          <AfterService v-else-if="item.key === '10'"></AfterService>
          <SupplierCatalogue v-else-if="item.key === '4'"></SupplierCatalogue>
          <SupplierContact v-else-if="item.key === '2'"></SupplierContact>
          <SupplierService v-else-if="item.key === '5'"></SupplierService>
          <SupplierTransaction
            v-else-if="item.key === '7'"
          ></SupplierTransaction>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { DatePicker } from '@arco-design/web-vue';
  import { reactive, ref, onMounted, computed } from 'vue';
  import { useRoute } from 'vue-router';
  import { GetArchivesHeaderMessage } from '@/api/buy-management/archives-details/index';
  import dayjs from 'dayjs';
  import AfterService from './components/after-service/index.vue';
  import BaseInfo from './components/base-info/index.vue';
  import ContractRecords from './components/contract-records/index.vue';
  import PaymentInvoiceRecords from './components/payment-invoice-records/index.vue';
  import SupplierAppendix from './components/supplier-appendix/index.vue';
  import SupplierAttestation from './components/supplier-attestation/index.vue';
  import SupplierCatalogue from './components/supplier-catalogue/index.vue';
  import SupplierContact from './components/supplier-contact/index.vue';
  import SupplierService from './components/supplier-service/index.vue';
  import SupplierTransaction from './components/supplier-transaction/index.vue';
  import SupplierAccoount from './components/supplier-account/index.vue';

  const route = useRoute();
  const title = ref('供应商档案信息');
  const breadCrumb = [
    '采购案例',
    '供应商管理',
    '注册供应列表',
    '供应商档案信息',
  ];

  const HeaderData = reactive<any>({ list: {} });
  const GetHeaderMessage = async () => {
    const res = await GetArchivesHeaderMessage({
      id: Number(route.query.id),
    });
    HeaderData.list = res;
  };
  GetHeaderMessage();

  const date: any = new Date();
  let tabsActive = ref('1');
  let tabs = ref([
    {
      key: '1',
      title: '基本信息',
    },
    {
      key: '2',
      title: '供应商联系人',
    },
    {
      key: '3',
      title: '供应商账户信息',
    },
    {
      key: '4',
      title: '供应商商品目录',
    },
    {
      key: '5',
      title: '供应商服务列表',
    },
    {
      key: '6',
      title: '供应商认证记录',
    },

    {
      key: '11',
      title: '供应商附件列表',
    },
  ]);
  // const tabsVisible = () => {
  //   if (route.query.type === '2') {
  //     tabs.value = [
  //       {
  //         key: '1',
  //         title: '基本信息',
  //       },
  //       {
  //         key: '2',
  //         title: '供应商联系人',
  //       },
  //       {
  //         key: '3',
  //         title: '供应商账户信息',
  //       },
  //       {
  //         key: '4',
  //         title: '供应商商品目录',
  //       },
  //       {
  //         key: '5',
  //         title: '供应商服务列表',
  //       },
  //       {
  //         key: '6',
  //         title: '供应商认证记录',
  //       },
  //       {
  //         key: '7',
  //         title: '供应商交易记录',
  //       },
  //       {
  //         key: '8',
  //         title: '合同记录',
  //       },
  //       {
  //         key: '9',
  //         title: '付款与交易记录',
  //       },
  //       {
  //         key: '10',
  //         title: '售后服务记录',
  //       },
  //       {
  //         key: '11',
  //         title: '供应商附件列表',
  //       },
  //     ];
  //   } else {
  //     tabs.value = [
  //       {
  //         key: '1',
  //         title: '基本信息',
  //       },
  //       {
  //         key: '2',
  //         title: '供应商联系人',
  //       },
  //       {
  //         key: '6',
  //         title: '供应商认证记录',
  //       },
  //       {
  //         key: '7',
  //         title: '供应商交易记录',
  //       },
  //       {
  //         key: '8',
  //         title: '合同记录',
  //       },
  //       {
  //         key: '9',
  //         title: '付款与交易记录',
  //       },
  //       {
  //         key: '10',
  //         title: '售后服务记录',
  //       },
  //       {
  //         key: '11',
  //         title: '供应商附件列表',
  //       },
  //     ];
  //   }
  // };
  // tabsVisible();
</script>

<style scoped lang="less"></style>
